<!-- 联系人卡片 -->
<template>
  <div @click="selectUser()" class="friend-card" :style="selectVisible && background">
    <div class="friend-card__left">
      <div class="friend-card__left__avatar">
        <el-avatar :size="40" :src="friendInfo.avatar">
          <img v-if="type === 'group'" src="../../assets/picture/gruopAvatar.png"/>
          <img v-else src="../../assets/picture/defaultAvatar.png"/>
        </el-avatar>
      </div>
      <span class="friend-card__left__name">{{ remark }}</span>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import _ from 'lodash'
export default {
  components: { },
  props: ['friendInfo', 'type'],
  computed: {
    ...mapState('app', ['selectMember', 'unreadList']),
    unread: function () { // 当前未读数，不过应该是没用，被废弃了，蛮留着
      if (!_.isUndefined(this.unreadList[this.friendInfo.roomId + ''])) {
        return this.unreadList[this.friendInfo.roomId + '']
      } else {
        return 0
      }
    },
    remark: function () { // 展示昵称或者用户名
      return this.friendInfo.nickName ? this.friendInfo.nickName : this.friendInfo.name
    },
    selectVisible: function () { // 是否被选中
      if (!_.isEqual(this.selectMember, {})) {
        return this.friendInfo.roomId + '' === this.selectMember.roomId + ''
      } else {
        return false
      }
    }
  },
  data () {
    return {
      background: {
        backgroundColor: 'rgba(247,247,247,1)'
      }
    }
  },
  methods: {
    selectUser () {
      this.$store.dispatch('app/setChatPanelType', 'member')
      this.$store.dispatch('app/setSelectMember', this.friendInfo)
      if (this.unreadList[this.friendInfo.roomId + '']) {
        const temp = _.cloneDeep(this.unreadList)
        temp[this.friendInfo.roomId + ''] = 0
        this.$store.dispatch('app/setUnreadList', temp)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.friend-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  cursor: pointer;
  &__left {
    height: 60px;
    display: flex;
    align-items: center;
    user-select: none;
    &__avatar {
      width: 40px;
      margin-right: 10px;
    }
    &__name {
      margin-left: 10px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      word-break: break-all;
      width: 170px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      display: inline-block;
    }
    &__remark {
      margin-left: 10px;
      font-size: 13px;
      color: #999;
      font-family: Source Han Sans CN;
      font-weight: 400;
    }
  }
  &__right {
    background-color: #e93323;
    border-radius: 100px;
    color: white;
    font-size: 12px;
    padding: 0px 5px;
  }
}
</style>
